<!---消缺过程监视--->
<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" fullscreen>
      <div v-show="this.titleAction==1">
        <div class="steps">
          <el-steps direction="horizontal" finish-status="success" :active="titleAction" align-center>
            <el-step v-for="step in steps" :key="step.code" :title="step.processName"></el-step>
          </el-steps>
        </div>
        <div class="expand1" @click="handleExpandAll">
          <svg-icon icon-class="list"></svg-icon>
          {{
            !showAll ? '展开工单信息' : '隐藏工单信息'
          }}
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
                 size="small">
          <div v-if="showAll">
            <div class="formtop">
              <div class="formcenter">工单基本信息</div>
              <div class="formbottom" v-if="showBasic">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="消缺工单名称:" prop="gdmc">
                      <el-input v-model="ruleForm.gdmc" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="单位:" prop="xqdwmc">
                      <el-input v-model="ruleForm.xqdwmc" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="消缺站点:" prop="xqzdTypeName">
                      <el-input v-model="ruleForm.xqzdTypeName" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="ruleForm.xqzdType === '0'" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="能源站:" prop="ssjfmc">
                      <el-input v-model="ruleForm.ssjfmc" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="ruleForm.xqzdType === '1'" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="库房:" prop="sskfmc">
                      <el-input v-model="ruleForm.sskfmc" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="计划开始时间:" prop="jhkssj">
                      <el-input v-model="ruleForm.jhkssj" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="计划结束时间:" prop="jhjssj">
                      <el-input v-model="ruleForm.jhjssj" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="消缺主要内容:" prop="xqnr">
                      <el-input v-model="ruleForm.xqnr" placeholder="无数据" clearable
                                disabled type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>


          </div>
          <div>
            <div class="formtop">
              <div class="formcenter">接派单信息</div>
              <div class="formbottom" v-if="showPaidan">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="派单人:" prop="pdPersonName">
                      <el-input v-model="ruleForm.pdPersonName" placeholder="无数据" clearable
                                disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="派单人电话:" prop="pdrTel">
                      <el-input v-model="ruleForm.pdrTel" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="派单时间:" prop="pdrTime">
                      <el-input v-model="ruleForm.pdrTime" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="接单人:" prop="jdPersonName">
                      <el-input v-model="ruleForm.jdPersonName" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="接单时间:" prop="jdTime">
                      <el-input v-model="ruleForm.jdTime" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="接单人电话:" prop="jdTel" v-show="1==2">
                      <el-input v-model="ruleForm.jdTel" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>


          </div>
          <div>
            <div class="formtop">
              <div class="formcenter">接单人认证信息</div>
              <div class="formbottom" v-if="showRenzheng" style="display: flex;">
                <div style="display: flex">
                  <div class="textwidth">接单人照片</div>
                  <div style="display: flex">
                    <el-card style="height: 250px;width: 250px;">
                      <el-image style="display: flex" :src="authPictureUrl" class="image"
                                :preview-src-list="authPictureList">
                        <div slot="error" class="image-slot"
                             style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                          <span>暂无照片</span>
                        </div>
                      </el-image>
                      <div style="padding: 14px">
                        <div>
                          <div>姓名:{{ ruleForm.jdPersonName }}</div>
                          <div style="width: 200px;" class="time">认证时间:{{ ruleForm.xqrzTime }}</div>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </div>
              </div>
            </div>


          </div>
          <!-- v-if="list.data.length>0" -->
          <div>
            <!-- <div v-for="(item, index) in list.data" :key="index" > -->
            <div v-for="(item, index) in list.data" :key="index">
              <div class="formtop">
                <div class="formcenter">缺陷{{ index + 1 }} - {{ item.defectName }}</div>
                <div class="formbottom" v-if="showQuexian">
                  <div style="cursor:pointer">
                    <h3 style="color:#009688;">缺陷隐患详情</h3>
                  </div>
                  <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
                  <div style="display: flex;margin-bottom:20px;">
                    <div class="textwidth">缺陷隐患照片</div>
                    <div style="display: flex">
                      <el-card style="height:250px;width:250px;" v-for="items in item.defectPictureList" :key="items">
                        <el-image ref="previewImg" :src="items" class="image"
                                  :preview-src-list="item.defectPictureList">
                          <div slot="error" class="image-slot"
                               style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                            <span>暂无照片</span>
                          </div>
                        </el-image>
                        <div style="padding: 14px">
                          <div>
                            <div style="display:flex;justify-content: flex-end;align-items: center;">
                              <div>
                                <el-button type="text" class="button"
                                           @click="handlePictureCardPreview()">放大
                                </el-button>
                                <el-button type="text" class="button"
                                           @click="handleDownload()">下载
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <el-row gutter="16" justify="start">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <el-form-item label="缺陷名称:">
                        <el-input v-model="item.defectName" placeholder="无数据" clearable
                                  disabled></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <el-form-item label="发现人:">
                        <el-input v-model="item.creator" placeholder="无数据" clearable disabled>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <el-form-item label="发现日期:">
                        <el-input v-model="item.createTime" placeholder="无数据" clearable disabled>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div style="cursor:pointer">
                    <h3 style="color:#009688;">现场处理</h3>
                  </div>
                  <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
                  <div style="display: flex;margin-bottom:20px;">
                    <div class="textwidth">到达现场图片</div>
                    <div style="display: flex;flex-wrap: wrap;">
                      <el-card style="height: 270px;width:250px;" v-for="items in item.ddxcPictureList" :key="items">
                        <el-image :src="items" class="image" :preview-src-list="item.ddxcPictureList">
                          <div slot="error" class="image-slot"
                               style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                            <span>暂无照片</span>
                          </div>
                        </el-image>
                        <div style="padding: 14px">
                          <span>到达现场图片</span>
                          <div>
                            <time class="time">{{ item.ddxcTime }}</time>
                            <div style="display:flex;justify-content: space-between;align-items: center;height: 25px;">
                              <div>{{ creator }}</div>
                              <div>
                                <el-button type="text" class="button"
                                           @click="handlePictureCardPreview()">放大
                                </el-button>
                                <el-button type="text" class="button"
                                           @click="handleDownload()">下载
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <el-row gutter="16" justify="start">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <el-form-item label-width="150px" label="缺陷隐患是否仍存在:">
                        <el-radio-group v-model="item.isExit" disabled>
                          <el-radio :label="'1'">存在</el-radio>
                          <el-radio :label="'2'">不存在</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col v-if="item.isExit!=='2'" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <el-form-item label="处理结果:">
                        <el-radio-group v-model="item.handleResult" disabled>
                          <el-radio :label="'1'">已处理</el-radio>
                          <el-radio :label="'0'">未处理</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!--  -->
                  <div v-if="item.isExit==='1' && item.handleResult === '1'" style="display:flex;margin-bottom:20px;">
                    <div class="textwidth">缺陷过程照片</div>
                    <div style="display: flex">
                      <div style="margin-right: 5px;height: 100%;flex-wrap: wrap;">
                        <el-card style="height: 250px;width:250px;" v-for="items in item.beforePictureList"
                                 :key="items">
                          <el-image :src="items" class="image" :preview-src-list="item.beforePictureList">
                            <div slot="error" class="image-slot"
                                 style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                              <span>暂无照片</span>
                            </div>
                          </el-image>
                          <div style="padding: 14px;display:flex;justify-content: space-between;align-items: center;">
                            <div style="width:100px;word-wrap: break-all;word-break: normal;">消缺前照片</div>
                            <div>
                              <el-button type="text" class="button"
                                         @click="handlePictureCardPreview()">放大
                              </el-button>
                              <el-button type="text" class="button"
                                         @click="handleDownload(file)">下载
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </div>
                      <div style="margin-right: 5px;height: 250px;">
                        <el-card style="height: 250px;width:250px;" v-for="items in item.inPictureList" :key="items">
                          <el-image :src="items" class="image" :preview-src-list="item.inPictureList">
                            <div slot="error" class="image-slot"
                                 style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                              <span>暂无照片</span>
                            </div>
                          </el-image>
                          <div style="padding: 14px;display:flex;justify-content: space-between;align-items: center;">
                            <div style="width:100px;word-wrap: break-all;word-break: normal;">消缺中照片</div>
                            <div>
                              <el-button type="text" class="button"
                                         @click="handlePictureCardPreview()">放大
                              </el-button>
                              <el-button type="text" class="button"
                                         @click="handleDownload(file)">下载
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </div>
                      <div style="margin-right: 5px;height: 250px;">
                        <el-card style="height: 250px;width:250px;" v-for="items in item.afterPictureList" :key="items">
                          <el-image :src="items" class="image" :preview-src-list="item.afterPictureList">
                            <div slot="error" class="image-slot"
                                 style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                              <span>暂无照片</span>
                            </div>
                          </el-image>
                          <div style="padding: 14px;display:flex;justify-content: space-between;align-items: center;">
                            <div style="width:100px;word-wrap: break-all;word-break: normal;">消缺后照片</div>
                            <div>
                              <el-button type="text" class="button"
                                         @click="handlePictureCardPreview()">放大
                              </el-button>
                              <el-button type="text" class="button"
                                         @click="handleDownload(file)">下载
                              </el-button>
                            </div>
                          </div>
                        </el-card>
                      </div>
                    </div>
                  </div>
                  <!--  -->
                  <div v-if="item.isExit==='2'" style="display:flex;margin-bottom:20px;">
                    <div class="textwidth">缺陷后照片</div>
                    <div style="display: flex">
                      <el-card style="height: 250px;width:250px;" v-for="items in item.afterPictureList" :key="items">
                        <el-image :src="items" class="image" :preview-src-list="item.afterPictureList">
                          <div slot="error" class="image-slot"
                               style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                            <span>暂无照片</span>
                          </div>
                        </el-image>
                        <div style="padding: 14px;display:flex;justify-content: space-between;align-items: center;">
                          <div style="width:100px;word-wrap: break-all;word-break: normal;">消缺后照片</div>
                          <div>
                            <el-button type="text" class="button"
                                       @click="handlePictureCardPreview()">放大
                            </el-button>
                            <el-button type="text" class="button"
                                       @click="handleDownload(file)">下载
                            </el-button>
                          </div>
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <div v-if="item.isExit==='1' && item.handleResult === '0'" style="display:flex;margin-bottom:20px;">
                    <div class="textwidth">现场情况</div>
                    <div style="display: flex">
                      <el-card style="height: 250px;width:250px;" v-for="items in item.xcqkPictureIdsList" :key="items">
                        <el-image :src="items" class="image" :preview-src-list="item.xcqkPictureIdsList">
                          <div slot="error" class="image-slot"
                               style="width: 100%;height: 100%;text-align: center;line-height: 150px;">
                            <span>暂无照片</span>
                          </div>
                        </el-image>
                        <div style="padding: 14px;display:flex;justify-content: space-between;align-items: center;">
                          <div style="width:100px;word-wrap: break-all;word-break: normal;">现场照片</div>
                          <div>
                            <el-button type="text" class="button"
                                       @click="handlePictureCardPreview()">放大
                            </el-button>
                            <el-button type="text" class="button"
                                       @click="handleDownload(file)">下载
                            </el-button>
                          </div>
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <el-row gutter="16" justify="start">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                      <el-form-item label="处理方法:">
                        <el-input v-model="item.dealMethod" placeholder="无数据" clearable disabled>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                      <el-form-item label="备注:">
                        <el-input v-model="item.remark" placeholder="无数据" clearable disabled type="textarea">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>


            </div>
          </div>

          <div>
            <div class="formtop">
              <div class="formcenter">结论报告</div>
              <div class="formbottom" v-if="showJielun">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="结论:" prop="xqjl">
                      <el-input v-model="ruleForm.xqjl" clearable
                                disabled type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="备注:" prop="xqEndRemark">
                      <el-input v-model="ruleForm.xqEndRemark" clearable
                                disabled type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>


          </div>
          <div>
            <div class="formtop">
              <div class="formcenter">工单规范性评价</div>
              <div class="formbottom" v-if="showPingjia">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item v-if="isDisabled" label="评价结论:" prop="zlpjjlmc">
                      <el-input v-model="ruleForm.zlpjjlmc" placeholder="无数据" clearable
                                :disabled="isDisabled"></el-input>
                    </el-form-item>
                    <el-form-item v-if="!isDisabled" label="评价结论:" prop="zlpjjl">
                      <el-select v-model="ruleForm.zlpjjl" placeholder="请选择评价结论" clearable
                                 style="width: 100%" @change="appraiseStatusChange">
                        <el-option v-for="item in appraiseStatusOptions" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="评价人:" prop="pjrName">
                      <el-input v-model="ruleForm.pjrName" placeholder="无数据" clearable
                                :disabled="isDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-form-item label="评价时间:" prop="pjTime">
                      <el-input v-model="ruleForm.pjTime" placeholder="无数据" clearable
                                :disabled="isDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item v-show="!appraiseContentShow" label="评价说明:" prop="pjsm">
                      <el-input v-model="ruleForm.pjsm" placeholder="无数据" clearable
                                :disabled="isDisabled" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item v-show="appraiseContentShow" label="评价说明:">
                      <el-input v-model="ruleForm.pjsm" placeholder="无数据" clearable
                                :disabled="isDisabled" type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>


          </div>
        </el-form>
        <span v-if="!isDisabled" slot="footer" class="dialog-footer">
                <el-button @click="handleCancel()" :size="size" icon="fa fa-minus-square-o">取消</el-button>
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
            </span>
      </div>
      <div>
        <div v-if="titleAction==2">
          <div>
            <div style="height:800px;width: 100%;">
              <thgis-map
                v-if="gisConfig.maptype"
                v-bind="gisConfig"
                @mapLoaded="mapLoaded"
              >
                <!--   :center="[116.30817983736284, 39.84946036621202]" -->
              </thgis-map>
              <thgis-track @trackClose="trackClose"></thgis-track>
            </div>
          </div>
        </div>
      </div>
      <PhoneVivew v-if="photoInfo.visible" :photoInfo="photoInfo"></PhoneVivew>
    </el-dialog>
  </div>
</template>
<script>
import {workOrderModelForm} from "../model/workOrderModelForm";
import {workOrderManagement} from '@/api/defects/workOrderManagement.js'
import PhoneVivew from "./PhoneView.vue"
import {getInfo} from "@/api/login";
import moment from "moment";

export default {
  components: {PhoneVivew},
  data() {
    return {
      photoInfo: {
        visible: false,
        photos: [
          {src: 'https://poi-pic-gz.cdn.bcebos.com/pic_f7b1a5e7b50dbc253a34d611d26fe7fd.jpg', desc: '我是第1张照片'},
        ],
        defaultIndex: 0
      },
      gisConfig: {},
      titleAction: 1,
      defectListImg: [],
      qxyhList: [],
      phoneList: [],
      appraiseContentShow: true,
      showBox: true,
      dialogProps: {
        visible: false,
        title: "过程监视",
        top: '5px',
        class: 'monitor-dialog-container',
        // width: '70%'
      },
      size: "medium",
      ruleForm: workOrderModelForm.FormData,
      rules: workOrderModelForm.rules,
      row: {},
      showSteps: [],
      steps: [
        {
          isNode: 1,
          isActive: 1,
          processDate: '2017-12-11 14：01',
          processName: '任务编制',
          code: '1',
          stepName: 'bianzhi',
          stepStatus: 'already',
          lineImg: 'buzhou1'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '派单',
          code: '2',
          stepName: 'paidan',
          stepStatus: 'already',
          lineImg: 'buzhou2'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '接单',
          code: '3',
          stepName: 'jiedan',
          stepStatus: 'isNode',
          lineImg: 'buzhou6'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '开始检测',
          code: '4',
          stepName: 'jiance',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '工单规范性评价',
          code: '5',
          stepName: 'pingjia',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '工单规范性评价',
          code: '6',
          stepName: 'pingjia',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '',
          processName: '归档',
          code: '7',
          stepName: 'guidang',
          stepStatus: 'not',
          lineImg: 'buzhou3'
        }
      ],
      isDisabled: true,
      appraiseStatusOptions: [{label: '合格', value: '1'}, {label: '不合格', value: '2'},],
      list: {
        data: []
      },
      list1: {
        data: []
      },
      list2: {
        data: []
      },
      authPictureUrl: "",
      authPictureList: [],
      dialogImageUrl: "",
      dialogImageUrlList: [],
      currentDate: '2022-9-9 10:10:00',
      showAll: true,
      showPaidan: true,
      showBasic: true,
      showRenzheng: true,
      showQuexian: true,
      showYinhuan: true,
      showHistory: true,
      showJielun: true,
      showPingjia: true,
    };
  },
  mounted() {
  },
  methods: {
    parseTime(time, cFormat) {
      if (arguments.length === 0) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if (('' + time).length === 10) time = parseInt(time) * 1000
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    },
    //二级穿透初始化
    showDialog(row, isEdit) {
      // this.row = row.row
      //数据清空
      this.showSteps = []
      this.authPictureUrl = []
      this.dialogProps.visible = true;
      this.$nextTick(() => {
        workOrderManagement.getById(row.row.handleTaskNo).then(res => {
          this.row = res.data[0] || {}
          for (let key in this.ruleForm) {
            this.ruleForm[key] = this.row[key];
          }
          this.fetchProcess()
          this.getTable()
          this.dialogProps.visible = true;
          if (isEdit) {
            this.dialogProps.title = '过程监视'
            this.appraiseContentShow = false
            this.isDisabled = false
            getInfo().then(res => {
              this.ruleForm.pjrName = res.user.nickName
              this.ruleForm.pjTime = moment().format("YYYY-MM-DD HH:mm:ss")
            })
          } else {
            this.dialogProps.title = '过程监视'
            this.isDisabled = true
            this.appraiseContentShow = true
          }
          if (this.ruleForm.xqrzTpIds && this.ruleForm.xqrzTpIds.length > 10) {
            this.authPictureList = []
            if (this.ruleForm.xqrzTpIds.indexOf(',') !== -1) {
              var arr = this.ruleForm.xqrzTpIds.split(',')
              if (arr[0].startsWith("https")) {
                this.authPictureUrl = arr[0];
              } else {
                this.authPictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(item => {
                if (item.startsWith("https")) {
                  item = item;
                } else {
                  item = this.udsImageUrl + item + "/user.png"
                }
                this.authPictureList.push(item)
              })
            } else {
              if (this.ruleForm.xqrzTpIds.startsWith("https")) {
                this.authPictureUrl = this.ruleForm.xqrzTpIds;
              } else {
                this.authPictureUrl = this.udsImageUrl + this.ruleForm.xqrzTpIds + "/user.png"
              }
              this.authPictureList.push(this.authPictureUrl)
            }
          }
        })

      })
    },
    handleExpandAll() {
      if (!this.showAll) {
        this.showPaidan = false

      }
      this.showAll = !this.showAll
    },
    fetchProcess() {
      workOrderManagement.getTaskOperateList2(this.row.id).then(res => {
        this.showSteps = res.data.map((d, i) => {
          const item = this.steps.find(b => b.code === d.code)
          d.stepName = item.stepName
          d.stepStatus = d.isNode ? 'isNode' : d.isActive ? 'already' : 'not'
          if (i === 0) {
            d.lineImg = d.isNode ? 'buzhou5' : d.isActive ? 'buzhou1' : 'buzhou4'
          } else if (i === (res.data.length - 1)) {
            d.lineImg = d.isNode ? 'buzhou9' : d.isActive ? 'buzhou8' : 'buzhou3'
          } else {
            d.lineImg = d.isNode ? 'buzhou6' : d.isActive ? 'buzhou2' : 'buzhou7'
          }
          return d
        })
      })
    },
    getTable() {
      workOrderManagement.getTaskEquipList(this.row.id).then(res => {
        this.list.data = []
        console.log(res)
        res.data.map(item => {
          if (item.defectPictureIds && item.defectPictureIds.length > 10) {
            item.defectPictureList = []
            if (item.defectPictureIds.indexOf(',') !== -1) {
              var arr = item.defectPictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.defectPictureUrl = arr[0];
              } else {
                item.defectPictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;

                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.defectPictureList.push(items)
              })
            } else {
              if (item.defectPictureIds.startsWith("https")) {

                item.defectPictureList.push(item.defectPictureIds)
              } else {
                item.defectPictureList.push(this.udsImageUrl + item.defectPictureIds + "/user.png")
              }
            }
          }
          if (item.ddxcPictureIds && item.ddxcPictureIds.length > 10) {
            item.ddxcPictureList = []
            if (item.ddxcPictureIds.indexOf(',') !== -1) {
              var arr = item.ddxcPictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.ddxcPictureUrl = arr[0];
              } else {
                item.ddxcPictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;
                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.ddxcPictureList.push(items)
              })
            } else {
              if (item.ddxcPictureIds.startsWith("https")) {
                item.ddxcPictureList.push(item.ddxcPictureIds);
              } else {
                item.ddxcPictureList.push(this.udsImageUrl + item.ddxcPictureIds + "/user.png")
              }
              // item.ddxcPictureList.push(item.ddxcPictureUrl)
            }
          }
          if (item.beforePictureIds && item.beforePictureIds.length > 10) {
            item.beforePictureList = []
            if (item.beforePictureIds.indexOf(',') !== -1) {
              var arr = item.beforePictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.beforePictureUrl = arr[0];
              } else {
                item.beforePictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;
                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.beforePictureList.push(items)
              })
            } else {
              if (item.beforePictureIds.startsWith("https")) {
                item.beforePictureList.push(item.beforePictureIds)
              } else {
                item.beforePictureList.push(this.udsImageUrl + item.beforePictureIds + "/user.png")
              }
              // item.beforePictureList.push(item.beforePictureUrl)
            }
          }
          if (item.inPictureIds && item.inPictureIds.length > 10) {
            item.inPictureList = []
            if (item.inPictureIds.indexOf(',') !== -1) {
              var arr = item.inPictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.inPictureUrl = arr[0];
              } else {
                item.inPictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;
                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.inPictureList.push(items)
              })
            } else {
              if (item.inPictureIds.startsWith("https")) {
                item.inPictureList.push(item.inPictureIds);
              } else {
                item.inPictureList.push(this.udsImageUrl + item.inPictureIds + "/user.png")
              }
              // item.inPictureList.push(item.inPictureUrl)
            }
          }
          if (item.afterPictureIds && item.afterPictureIds.length > 10) {
            item.afterPictureList = []
            if (item.afterPictureIds.indexOf(',') !== -1) {
              var arr = item.afterPictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.afterPictureUrl = arr[0];
              } else {
                item.afterPictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;
                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.afterPictureList.push(items)
              })
            } else {
              if (item.afterPictureIds.startsWith("https")) {
                item.afterPictureList.push(item.afterPictureIds);
              } else {
                item.afterPictureList.push(this.udsImageUrl + item.afterPictureIds + "/user.png")
              }
              // item.afterPictureList.push(item.afterPictureUrl)
            }
          }
          if (item.sitePictureIds && item.sitePictureIds.length > 10) {
            item.sitePictureList = []
            if (item.sitePictureIds.indexOf(',') !== -1) {
              var arr = item.sitePictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.sitePictureUrl = arr[0];
              } else {
                item.sitePictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;
                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.sitePictureList.push(items)
              })
            } else {
              if (item.sitePictureIds.startsWith("https")) {
                item.sitePictureList.push(item.sitePictureIds);
              } else {
                item.sitePictureList.push(this.udsImageUrl + item.sitePictureIds + "/user.png")
              }
              // item.sitePictureList.push(item.sitePictureUrl)
            }
          }
          if (item.xcqkPictureIds && item.xcqkPictureIds.length > 10) {
            item.xcqkPictureIdsList = []
            if (item.xcqkPictureIds.indexOf(',') !== -1) {
              var arr = item.xcqkPictureIds.split(',')
              if (arr[0].startsWith("https")) {
                item.sitePictureUrl = arr[0];
              } else {
                item.sitePictureUrl = this.udsImageUrl + arr[0] + "/user.png"
              }
              arr.map(items => {
                if (items.startsWith("https")) {
                  items = items;
                } else {
                  items = this.udsImageUrl + items + "/user.png"
                }
                item.xcqkPictureIdsList.push(items)
              })
            } else {
              if (item.xcqkPictureIds.startsWith("https")) {
                item.xcqkPictureIdsList.push(item.xcqkPictureIds);
              } else {
                item.xcqkPictureIdsList.push(this.udsImageUrl + item.xcqkPictureIds + "/user.png")
              }
              // item.sitePictureList.push(item.sitePictureUrl)
            }
          }
          this.list.data.push(item)
        })
      }).catch(err => {
        console.log(err)
      })
    },

    //编辑渲染
    initData() {

    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview() {

    },
    handleDownload(file) {
      var link = document.createElement('a');
      link.href = file
      link.download = file;
      link.click();
    },
    handleClick(val) {
      this.showQuexian1 = false
    },
    //确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const queryParam = Object.assign({}, this.ruleForm)

          const params = {
            id: this.row.id,
            gdzt: this.ruleForm.zlpjjl === '1' ? '100' : '20',
            gdztMc: this.ruleForm.zlpjjl === '1' ? '归档' : '已接单',
            ...queryParam,
          }
          workOrderManagement.getZlpjSend(params).then(res => {
            if (res.code === '200') {
              this.$message.success('评价成功')
              this.handleCancel()
              this.$emit('onSearch')
              this.dialogProps.visible = false;
            }

          }).catch(err => {
          })
        } else {
          return false;
        }
      });
    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()
      // for (const k in this.form.data) {
      //   this.form.data[k] = ''
      // }
      this.list = {
        data: [],
      }
      this.row = {}
      this.dialogProps.visible = false;
    },
    //确定关闭
    handleClose(done) {
      this.dialogProps.visible = false;
      this.titleAction = 1
    },
    appraiseStatusChange(value) {
      this.ruleForm.zlpjjlmc = '';
      if (value) {
        let arr = this.appraiseStatusOptions.filter(item => {
          return item.value == value;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.zlpjjlmc = arr[0].label;
        }
      }
      if (value == '2') {
        this.appraiseContentShow = true
      } else {
        this.appraiseContentShow = false
      }
    }
  },
};

</script>
<style>
.linkBox {
  width: 7%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(170, 170, 170, 1);
  border-radius: 10px;
  padding: 10px 5px;
  position: fixed;
  bottom: 50%;
  left: 0;
}

.iclass {
  border: 1px solid rgba(215, 215, 215, 1);
  color: #333;
  list-style: none;
}

.iclass:hover {
  background: rgba(231, 241, 253, 1);
}

.active {
  list-style: none;
  color: #0e867f;
  border: 1px solid rgba(215, 215, 215, 1);
  background: rgba(231, 241, 253, 1);
}

.maodianFont {
  height: 54px;
  line-height: 34px;
  font-size: 18px;
  text-decoration: none;
  font-family: '微软雅黑';
  color: #333;
}

.maodianFont:hover {
  color: #0e867f;
}

.activeFont {
  height: 54px;
  line-height: 34px;
  font-size: 18px;
  text-decoration: none;
  font-family: '微软雅黑';
  color: #0e867f;
}

.formBox {
  width: 92%;
  margin-left: 8%;
}

.steps {
  padding: 0 20px;
}

.formtop {
  margin-bottom: 10px;
}

.formcenter {
  width: 100%;
  height: 34px;
  line-height: 34px;
  color: #fff;
  border-radius: 4px;
  background: #009688;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;

}

.formbottom {
  border-left: 2px solid #b0dbe1;
  border-right: 2px solid #b0dbe1;
  border-bottom: 2px solid #b0dbe1;
  background: #b0dbe129;
  padding: 10px;

}

.textwidth {
  padding-left: 10px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
  height: 150px;
}
</style>
